<template>
  <ContainerGroup>
    <Container>
      <div class="ck-filter-form" :style="{ height: containerHeight }">
        <div ref="input-container" class="form-item-container">
          <div class="form-item">
            <span class="form-item-label">姓名：</span>
            <el-input
              v-model.trim="ruleForm.name"
              placeholder="请输入姓名"
              size="mini"
              style="width: 180px"
            />
          </div>
          <div class="form-item">
            <span class="form-item-label">住院号：</span>
            <el-input
              v-model.trim="ruleForm.inpatientNo"
              placeholder="请输入住院号"
              size="mini"
              style="width: 180px"
            />
          </div>
          <div class="form-item">
            <span class="form-item-label">医嘱：</span>
            <el-input
              v-model.trim="ruleForm.changeType"
              placeholder="请输入医嘱"
              size="mini"
              style="width: 180px"
            />
          </div>
          <div class="form-item">
            <span class="form-item-label">时间：</span>
            <el-date-picker
              v-model.trim="ruleForm.timeDate"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '23:59:59']"
              size="mini"
            />
          </div>
        </div>
        <div class="right-btn-container">
          <div
            v-for="(item, index) in buttonList"
            :key="index + '_'"
            class="form-item-btn"
          >
            <Button
              :type="item.type"
              :icon="item.icon"
              :loading="item.loading"
              @click="item.handlerClick"
            >{{ item.label }}</Button>
          </div>
          <span
            v-show="showCloseAndOpen"
            class="more-text"
            @click="openAndCloseFilterForm"
          >{{ openOrCloseText }}</span>
        </div>
      </div>
    </Container>
    <Container height="fill" :scroll-y="true" display="flexY">
      <Table
        :columns="tableColumns"
        :data="tableData"
        :loading="tableLoading"
        :pagination="{
          total: total,
          current: pageInfor.pageNum,
          pageSize: pageInfor.pageSize,
        }"
        @paginationChange="pageChange"
      />
    </Container>
  </ContainerGroup>
</template>
<script>
import {
  userList,
  leaveAdvicePage
} from '@/api/triLogin'
export default {
  name: 'MedicalStatistics', // 出院医嘱统计
  data() {
    return {
      ruleForm: {
        name: '',
        inpatientNo: '',
        timeDate: this.getTime(),
        changeType: ''
      },
      cjLoading: false,
      userDataList: [],
      buttonList: [
        {
          label: '查询',
          type: 'primary',
          icon: 'search',
          handlerClick: this.handerSearch,
          loading: false
        },
        {
          label: '重置',
          type: 'info',
          icon: 'reset',
          handlerClick: this.handlerReset
        }
      ],
      containerHeight: '35px',
      showCloseAndOpen: false,
      openOrCloseText: '展开',
      tableLoading: false,
      tableData: [],
      pageInfor: {
        pageNum: 1,
        pageSize: 20
      },
      tableColumns: [
        {
          title: '住院号',
          dataIndex: 'inpatientNo'
        },
        {
          title: '姓名',
          dataIndex: 'name'
        },
        {
          title: '科室编号',
          dataIndex: 'deptCode'
        },
        {
          title: '科室名称',
          dataIndex: 'deptName'
        },
        {
          title: '病区编号',
          dataIndex: 'nurseCellCode'
        },
        {
          title: '病区名称',
          dataIndex: 'nurseCellName'
        },
        {
          title: '床位号',
          dataIndex: 'bedNo'
        },
        {
          title: '入住病区时间',
          dataIndex: 'admissionWardDate'
        },
        {
          title: '出院医嘱',
          dataIndex: 'changeType'
        },
        {
          title: '计划出院时间',
          dataIndex: 'disChargeDate'
        }
      ],
      total: 0
    }
  },
  mounted() {
    this.getFdata()
    this.initShowCloseOrOpen()
    window.addEventListener('resize', this.initShowCloseOrOpen)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.initShowCloseOrOpen)
  },
  methods: {
    getSelect(query = '') {
      if (query !== '') {
        this.cjLoading = true
        userList({
          realName: query
        }).then(res => {
          this.cjLoading = false
          if (res.data.code === 200) {
            this.userDataList = res.data.data
          } else {
            this.$message.error(res.data.message)
          }
        })
      } else {
        this.userDataList = []
      }
    },
    initShowCloseOrOpen() {
      setTimeout(() => {
        this.showCloseAndOpen = this.$refs['input-container'].scrollHeight > 35
      }, 50)
    },
    openAndCloseFilterForm() {
      this.containerHeight = this.openOrCloseText === '展开' ? 'auto' : '35px'
      this.openOrCloseText = this.openOrCloseText === '展开' ? '收起' : '展开'
    },
    getTime() {
      const today = new Date()
      const prevSevenDay = this.$moment(new Date(today.setDate(today.getDate() - 7))).format('YYYY-MM-DD')
      return [prevSevenDay + ' 00:00:00', this.$moment(new Date()).format('YYYY-MM-DD') + ' 23:59:59']
    },
    handlerReset() {
      this.ruleForm.name = ''
      this.ruleForm.inpatientNo = ''
      this.ruleForm.changeType = ''
      this.ruleForm.timeDate = this.getTime()
      this.getFdata()
    },
    // 获取数据
    getFdata() {
      const parms = {
        name: this.ruleForm.name,
        inpatientNo: this.ruleForm.inpatientNo,
        startTime: this.ruleForm.timeDate === '' || this.ruleForm.timeDate === null ? '' : this.ruleForm.timeDate[0],
        endTime: this.ruleForm.timeDate === '' || this.ruleForm.timeDate === null ? '' : this.ruleForm.timeDate[1],
        changeType: this.ruleForm.changeType,
        pageNum: this.pageInfor.pageNum,
        pageSize: this.pageInfor.pageSize
      }
      leaveAdvicePage(parms).then((res) => {
        if (res.data.code === 200) {
          this.tableData = res.data.data.list
          this.total = res.data.data.total
        }
      })
    },
    // 创建者下拉
    handleCreatedBy(value) {
      this.getSelect(value)
    },
    // 获取下拉框数据
    pageChange(page) {
      this.pageInfor.pageNum = page.current
      this.pageInfor.pageSize = page.pageSize
      this.getFdata()
    },
    handerSearch() {
      this.pageInfor.pageNum = 1
      this.getFdata()
    }
  }
}
</script>
<style lang="less" scoped>
.ck-filter-form {
  display: flex;
  align-items: top;
  overflow: hidden;
  .form-item-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    .form-item {
      display: flex;
      align-items: center;
      margin: 3px;
      margin-right: 15px;
      .form-item-label {
        color: #909399;
        text-align: right;
        font-size: 16px;
        white-space: nowrap;
      }
    }
  }
  .right-btn-container {
    text-align: center;
    display: flex;
    padding-top: 5px;
    .form-item-btn {
      margin: 0px 3px;
    }
    .more-text {
      display: block;
      width: 50px;
      margin-top: 6px;
      color:#2165f9;
      cursor: pointer;
      user-select: none;
    }
  }
}
.form-item {
  min-width: 280px;
  height: 28px;
}
.form{
  display: flex;
  align-items: center;
  p{
    margin-right: 40px;
    color: #909399;
  }
}
</style>
